CSS Selector
CSS selectors are used to choose the elements you want to style. They are
part of a CSS rule set and allow you to target HTML elements based on
their id, class, type, or attributes.
There are various types of selectors in CSS:
- CSS Element Selector
- CSS ID Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
CSS Element Selector
He element selector targets HTML elements based on their tag name.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<h1 id="ak">Me too! And me!</h1>
</body>
</html>
Output
.png)
CSS ID Selector
.png)
- The id selector targets a specific HTML element by its unique id attribute.
- Since each id is unique on the page, it is used to select a single, specific element.
- It is written with a hash symbol (#) followed by the element's id.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#ak{
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<h1 id="ak">Me too! And me!</h1>
</body>
</html>
Output
.png)
CSS Class Selector
The class selector targets HTML elements that have a specific class
attribute. It is written with a period (.) followed by the class name.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.ak{
color: red;
}
</style>
</head>
<body>
<h1 class="ak">Heading</h1>
<p>paragraph.</p>
</body>
</html>
Output
.png)
CSS Universal Selector
The universal selector acts as a wildcard, selecting all elements on the
page.
Example
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h2>Heading</h2>
<p>This style will be applied to every paragraph.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
Output
.png)
CSS Group Selector
The grouping selector applies the same styles to multiple elements. It
helps reduce code by combining selectors with commas.
The CSS code without using the group selector:
h2{
text-align: center;
color: red;
}
h1{
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
The CSS code using the group selector
h2,h1,p{
text-align: center;
color: red;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2,h1,p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>This style will be applied to every paragraph.</h1>
<h2>Me too!</h2>
<p>And me!</p>
</body>
</html>
output
.png)
.png&description=CSS SELECTOR){kind=link}